﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
					xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:LogWare.Controls">
	<!-- 
         This color will be used to draw a border around the TabControl, on 
         the bottom of the TabPanel and on the bottom of unselected TabItems.
         -->
	<Color x:Key="BorderColor_Base">#888</Color>

	<!-- 
         This color will be used to draw the (outer) background of TabPages and
         the selected TabItem.
      -->
	<Color x:Key="TabControl_BackgroundColor_Base">#EEF7FF</Color>

	<!---->
      <Color x:Key="TabItem_ForegroundColor_Base">#4971A3</Color>

      <!-- Brushes used for styling the TabControl -->
	<SolidColorBrush x:Key="TabControl_BackgroundBrush_Base" 
                       Color="{StaticResource TabControl_BackgroundColor_Base}"/>

	<!-- Brushes for drawing the outer and inner borders on TabPages -->
	<SolidColorBrush x:Key="TabPage_InnerBorderBrushDark" 
                       Color="#FF8DB2E3"/>
	<LinearGradientBrush x:Key="TabPage_InnerBorderBrushBright" 
                           StartPoint="0,0" EndPoint="1,1">
		<LinearGradientBrush.GradientStops>
			<GradientStop Offset="0" Color="Transparent"/>
			<GradientStop Offset="1" Color="#FFC0F9FF"/>
		</LinearGradientBrush.GradientStops>
	</LinearGradientBrush>

	<!-- 
         We only want to render a line between the TabControl's TabPage-area and
         the TabItemsPanel where there is no TabItem/TabStrip. However, we cannot
         simply set the TabPanel's Background-property as this would affect
         the area as a whole.
         The trick here is to define a gradient that only renders a 1px line at
         the bottom. Since TabItems are rendered above the background, this line
         will only be visible in the area that doesn't contain a TabItem.
         We'll achieve this effect by using a gradient that finishes with the
         border-color, but only for the last .01%.
      -->
	<!--<Color x:Key="TabPanel_BackgroundColor_Base">#ABCABC</Color>-->
	<Color x:Key="TabPanel_BackgroundColor_Base">Transparent</Color>
	<LinearGradientBrush x:Key="TabPanel_BackgroundBrush" 
                           StartPoint="0,0" EndPoint="0,1">
		<LinearGradientBrush.GradientStops>
			<!--<GradientStop Offset="0.98" Color="Transparent"/>-->
			<GradientStop Offset="0.98" Color="{StaticResource TabPanel_BackgroundColor_Base}"/>
			<GradientStop Offset="0.99" 
               Color="{StaticResource BorderColor_Base}"/>
		</LinearGradientBrush.GradientStops>
	</LinearGradientBrush>

	<!-- Brushes used for styling TabItems (Background) -->
	<LinearGradientBrush x:Key="TabItem_BackgroundBrush_Disabled" 
                           StartPoint="0,0" EndPoint="0,1">
		<LinearGradientBrush.GradientStops>
			<GradientStop Color="#EEE" Offset="0"/>
			<GradientStop Color="#BBB" Offset="0.98"/>
			<!-- 
               This is the same trick as with the TabPanel_BackgroundBrush (see there).
            -->
			<GradientStop Color="{StaticResource BorderColor_Base}" 
                          Offset="0.99"/>
		</LinearGradientBrush.GradientStops>
	</LinearGradientBrush>
	<LinearGradientBrush x:Key="TabItem_BackgroundBrush_Selected" 
                           StartPoint="0,0" EndPoint="0,1">
		<LinearGradientBrush.GradientStops>
			<GradientStop Color="#FFFFC14A" Offset="0.1" />
			<GradientStop Color="{StaticResource TabControl_BackgroundColor_Base}" 
                          Offset="0.15"/>
			<GradientStop Color="#C5DBF6" Offset="0.8"/>
			<GradientStop Color="{StaticResource TabControl_BackgroundColor_Base}" 
                          Offset="1.0"/>
		</LinearGradientBrush.GradientStops>
	</LinearGradientBrush>
	<LinearGradientBrush x:Key="TabItem_BackgroundBrush_Unselected" 
                           StartPoint="0,0" EndPoint="0,1">
		<LinearGradientBrush.GradientStops>
			<GradientStop Color="#E8F2FF" Offset="0.0"/>
			<GradientStop Color="#DFE9F6" Offset="0.3"/>
			<GradientStop Color="#C7D8EE" Offset="0.7"/>
			<GradientStop Color="#B9CADE" Offset="0.98"/>
			<!-- See the TabPanel_BackgroundBrush comment. -->
			<GradientStop Color="{StaticResource BorderColor_Base}" 
                          Offset="0.99"/>
		</LinearGradientBrush.GradientStops>
	</LinearGradientBrush>
	<LinearGradientBrush x:Key="TabItem_HoverBackgroundBrush" 
                           EndPoint="0.5,1" StartPoint="0.5,0">
		<GradientStop Color="#FFFFD5A0" Offset="0.3" />
		<GradientStop Color="#FFFFA335" Offset="0.51" />
		<GradientStop Color="#FFFFC14A" Offset="0.98" />
	</LinearGradientBrush>

	<!-- Brushes used for styling TabItems (Foreground/Text) -->
	<SolidColorBrush x:Key="TabItem_TextBrush_Unselected" 
                       Color="{StaticResource TabItem_ForegroundColor_Base}" />
	<SolidColorBrush x:Key="TabItem_TextBrush_Disabled" Color="#888" />
	<SolidColorBrush x:Key="TabItem_TextBrush_Hover" Color="#2D2C8A" />
	<SolidColorBrush x:Key="TabItem_TextBrush_Selected" Color="#0D3288" />

	<!-- Brushes used for styling TabItems (Borders) -->
	<!-- 
         For all borders around the TabItems, we'll have to use either the 
         identical color OR (what's being done here) we'll have to assure the
         bottom of the border will always result in the color that is being
         used for drawing the line between the TabControl and the TabPanel.
      
         If we do use a different (solid) color here, the bottom line will not
         be rendered as desired which I presume is a matter of precedence in the
         way borders are being drawn (anti-clockwise, starting with bottom and
         finishing with left, hence the effect of the left and right edges of 
         the bottom line being drawn with the left and right border respectively).
         If you want to try it out, exchange the LinearGradientBrush with the
         SolidColorBrush that has been commented out and run the app.
         You'll probably have to zoom in to see the effect. 
      -->
	<!--<SolidColorBrush x:Key="TabItem_DisabledBorderBrush" Color="#CCC" />-->
	<LinearGradientBrush x:Key="TabItem_DisabledBorderBrush" 
                           StartPoint="0,0" EndPoint="0,1">
		<GradientStop Color="#CCC" Offset="0"/>
		<GradientStop Color="{StaticResource BorderColor_Base}" 
                       Offset="0.8"/>
	</LinearGradientBrush>
	<SolidColorBrush x:Key="TabItem_BorderBrush_Selected" 
                       Color="{StaticResource BorderColor_Base}" />
	<!-- See the comment regarding the TabItem_DisabledBorderBrush above. -->
	<LinearGradientBrush x:Key="TabItem_Border_Unselected" 
                           StartPoint="0,0" EndPoint="0,1">
		<GradientStop Color="#AAA" Offset="0"/>
		<GradientStop Color="{StaticResource BorderColor_Base}" 
                       Offset="0.8"/>
	</LinearGradientBrush>
	<LinearGradientBrush x:Key="TabItem_HoverBorderBrush" StartPoint="0,0" 
                           EndPoint="0,1">
		<LinearGradientBrush.GradientStops>
			<GradientStop Offset="0.98" Color="DarkOrange"/>
			<!-- See the TabPanel_BackgroundBrush comment. -->
			<GradientStop Offset="0.99"
                          Color="{StaticResource BorderColor_Base}"/>
		</LinearGradientBrush.GradientStops>
	</LinearGradientBrush>

	<!-- 
         Margins for TabItems - these will be set in the respective triggers; 
         also, the transition between two states will be animated using the Storyboards
         below.
      -->
	<Thickness x:Key="TabItemMargin_Base">0,8,-4,0</Thickness>
	<Thickness x:Key="TabItemMargin_Selected">-4,0,-4,0</Thickness>
	<Thickness x:Key="TabItemMargin_Hover_Start">0,2,0,0</Thickness>
	<Thickness x:Key="TabItemMargin_Hover_Final">0,4,0,0</Thickness>
	<!-- The Margin for the ScrollableTabPanel (inside the ScrollViewer) -->
	<Thickness x:Key="TabPanel_Padding">4,0,4,0</Thickness>
	<!-- 
         The margin for the StackPanel that hosts the scroll-controls and the 
         Menu making up the "TabItem-QuickPicker".
      -->
	<Thickness x:Key="TabPanelScrollControlsPanel_Margin">5,0,0,2</Thickness>

	<!-- Transistion effects (animations) - added in part two -->
	<!-- This will run when a TabItem enters the "Unselected" state -->
	<Storyboard x:Key="TabItemStoryBoard_Unselected">
		<ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="{StaticResource TabItemMargin_Base}"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
	</Storyboard>
	<!-- This will run when a TabItem enters the "Selected" state -->
	<Storyboard x:Key="TabItemStoryBoard_Selected">
		<ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="{StaticResource TabItemMargin_Selected}" 
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
	</Storyboard>
	<!-- This will run when a TabItem enters the "Hover" state -->
	<Storyboard x:Key="TabItemStoryBoard_Hover">
		<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                                           Storyboard.TargetProperty="Margin"
                                           FillBehavior="HoldEnd">
			<SplineThicknessKeyFrame KeyTime="0:0:0.1"
                                     Value="{StaticResource TabItemMargin_Hover_Start}"/>
			<SplineThicknessKeyFrame KeyTime="0:0:0.2"
                                     Value="{StaticResource TabItemMargin_Hover_Final}"/>
		</ThicknessAnimationUsingKeyFrames>
	</Storyboard>

	<!-- The colors that will be used when assembling the brushes for the LineButtons-->
	<Color x:Key="LineButtonBackgroundColor_Bright">LightGoldenrodYellow</Color>
	<Color x:Key="LineButtonBackgroundColor_Dark">#FAEEB1</Color>
	<Color x:Key="LineButtonBackgroundColorDisabled_Bright">#EEE</Color>
	<Color x:Key="LineButtonBackgroundColorDisabled_Dark">#999</Color>

	<!-- Color of the border around the scrollbar-thumb -->
	<SolidColorBrush x:Key="LineButtonBorderBrush" Color="#FF8693BD"/>

	<!-- The color for the scrollbar's line-buttons when the mouse hovers over them -->
	<LinearGradientBrush x:Key="LineButtonHoverBrush" StartPoint="0.5,0" EndPoint="0.5,1">
		<GradientStop Color="#FFFFD5A0" Offset="0.3"/>
		<GradientStop Color="#FFFFA335" Offset="0.51"/>
		<GradientStop Color="#FFFFC14A" Offset="0.986"/>
	</LinearGradientBrush>

	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="LineButtonBackgroundBrush">
		<GradientStop Offset="0.3" Color="{StaticResource LineButtonBackgroundColor_Bright}"/>
		<GradientStop Offset="0.4" Color="{StaticResource LineButtonBackgroundColor_Dark}"/>
		<GradientStop Offset="1" Color="{StaticResource LineButtonBackgroundColor_Bright}"/>
	</LinearGradientBrush>


	<!-- The color for the scrollbar's line-buttons when they're clicked/pressed -->
	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="LineButtonPressedBrush">
		<GradientStop Offset="0" Color="{StaticResource LineButtonBackgroundColor_Bright}"/>
		<GradientStop Offset="0.6" Color="{StaticResource LineButtonBackgroundColor_Dark}"/>
		<GradientStop Offset="0.7" Color="{StaticResource LineButtonBackgroundColor_Bright}"/>
	</LinearGradientBrush>

	<!-- The color to be used when drawing the arrows on the scrollbar's line-buttons -->
	<SolidColorBrush x:Key="LineButtonBrush" Color="#FF14273D"/>
	<!-- The color to be used for painting the interior of the TabItem-menu's path -->
	<LinearGradientBrush x:Key="TabMenuButtonBrush" StartPoint="0,0" EndPoint="1,1">
		<GradientStop Offset="0" Color="White"/>
		<GradientStop Offset="1" Color="#F3F3E3"/>
	</LinearGradientBrush>

	<!-- The color for the scrollbar's line-buttons when they're disabled -->
	<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="LineButtonDisabledBrush">
		<GradientStop Offset="0" Color="{StaticResource LineButtonBackgroundColorDisabled_Bright}"/>
		<GradientStop Offset="1" Color="{StaticResource LineButtonBackgroundColorDisabled_Dark}"/>
	</LinearGradientBrush>

	<!-- The background color of the TabItems popup-menu -->
	<LinearGradientBrush x:Key="TabItemMenuBackcolor" StartPoint="0,0" EndPoint="1,1">
		<GradientStop Offset="0" Color="White"/>
		<GradientStop Offset="1" Color="#EEE"/>
	</LinearGradientBrush>

	<!--
         The Geometries below will be used to render the ScrollViewer's LineLeft-,
         LineRight- and TabMenu-buttons.
      -->
	<Geometry x:Key="ArrowLeft">M0,5 L10,10 10,0Z</Geometry>
	<Geometry x:Key="ArrowRight">M0,0 L10,5 L0,10Z</Geometry>
	<Geometry x:Key="TabMenuButton">M0,1 H0,5 M7,8 L0,8 0,2 10,2 L10,5 M10,8 L10,10 8,10Z</Geometry>
	<!--******** added in part IV ************-->
	<Geometry x:Key="X_CloseButton">M0,0 L10,10 M0,10 L10,0</Geometry>

	<!-- 
         Definitions for the Path-Geometries that are being used to render
         the ScrollViewer's LineButtons.
      -->
	<Path x:Key="ArrowLeftPath"
            Margin="4,3"
            Data="{StaticResource ArrowLeft}"
            Stroke="{StaticResource LineButtonBrush}" 
            Fill="{StaticResource LineButtonBrush}"
            Stretch="Fill"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"/>
	<Path x:Key="ArrowRightPath"
            Margin="4,3"
            Data="{StaticResource ArrowRight}"
            Stroke="{StaticResource LineButtonBrush}" 
            Fill="{StaticResource LineButtonBrush}"
            Stretch="Fill"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"/>
	<Path x:Key="TabMenuButtonPath"
            Margin="2"
            Data="{StaticResource TabMenuButton}"
            Stroke="{StaticResource LineButtonBrush}" 
            Fill="{StaticResource TabMenuButtonBrush}"
            Stretch="Fill"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"/>

	<!-- 
         This determines how wide/high the LineButtons and the TabMenu button 
         will be rendered.
      -->
	<sys:Double x:Key="ButtonWidthAndHeight">16</sys:Double>

	<!--******** TabItemCloseButton (added in part IV) -> ************-->
	<!--
         This determines how wide/high the CloseButtons on TabItems 
         will be rendered.
      -->
	<sys:Double x:Key="CloseButtonWidthAndHeight">14</sys:Double>

	<!-- Styles for the LineButtons -->
	<Style x:Key="LineButtonStyle" TargetType="{x:Type RepeatButton}">
		<Setter Property="Focusable" Value="False"/>
		<Setter Property="Height" Value="{StaticResource ButtonWidthAndHeight}"/>
		<Setter Property="Width" Value="{StaticResource ButtonWidthAndHeight}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type RepeatButton}">
					<Border Name="ButtonBorder" Margin="1"
                          BorderBrush="{StaticResource LineButtonBorderBrush}" 
                          Background="{StaticResource LineButtonBackgroundBrush}" 
                          CornerRadius="1" 
                          BorderThickness="1">
						<ContentPresenter HorizontalAlignment="Stretch"
                                       VerticalAlignment="Stretch"/>
					</Border>
					<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="true">
							<Setter TargetName="ButtonBorder" Property="Background" 
                                Value="{StaticResource LineButtonHoverBrush}" />
						</Trigger>
						<Trigger Property="IsPressed" Value="true">
							<Setter TargetName="ButtonBorder" Property="Background" 
                                Value="{StaticResource LineButtonPressedBrush}" />
						</Trigger>
						<Trigger Property="IsEnabled" Value="False">
							<Setter TargetName="ButtonBorder" Property="Background" 
                                Value="{StaticResource LineButtonDisabledBrush}" />
							<Setter TargetName="ButtonBorder" Property="Opacity" 
                                Value="0.4"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<!-- 
         The style for the MenuItem that represents the clickable portion
         for opening the sub-menu that itself will contain the list of
         TabItems.         
      -->
	<Style x:Key="TabMenuButtonStyle" TargetType="{x:Type MenuItem}">
		<Setter Property="Focusable" Value="False"/>
		<Setter Property="Height" Value="{StaticResource ButtonWidthAndHeight}"/>
		<Setter Property="Width" Value="{StaticResource ButtonWidthAndHeight}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type MenuItem}">
					<Border Name="ButtonBorder" Margin="1" 
                          BorderBrush="{StaticResource LineButtonBorderBrush}" 
                          Background="{StaticResource LineButtonBackgroundBrush}" 
                          CornerRadius="1" 
                          BorderThickness="1">
						<Grid>
							<ContentPresenter ContentSource="Header" 
                                          Content="{StaticResource TabMenuButtonPath}"
                                          HorizontalAlignment="Stretch"
                                          VerticalAlignment="Stretch"/>
							<Popup Name="Popup"
                               Placement="Bottom"
                               IsOpen="{TemplateBinding IsSubmenuOpen}"
                               AllowsTransparency="True" 
                               Focusable="False"
                               PopupAnimation="Fade">
								<!-- 
                              Since we override the ControlTemplate, we're also responsible
                              for drawing stuff like the shadow around the popup-menu.
                              
                              Here, I'll use a Chrome that's provided in the Aero assembly. 
                              Note that, in order to use this (that is, the namespace defined
                              at the very top of this window), a reference to 
                              PresentationFramework.Aero is required.
                           -->
								<mwt:SystemDropShadowChrome Color="#71000000" 
                                                       CornerRadius="1"
                                                       Margin="0,0,8,8"
                                                       SnapsToDevicePixels="True">
									<Border Name="SubmenuBorder"
                                   Margin="1"
                                   SnapsToDevicePixels="True"
                                   BorderBrush="{StaticResource LineButtonBorderBrush}" 
                                   Background="{StaticResource TabItemMenuBackcolor}" 
                                   CornerRadius="1" 
                                   BorderThickness="1">
										<StackPanel 
                                    IsItemsHost="True" 
                                    KeyboardNavigation.DirectionalNavigation="Cycle" />
									</Border>
								</mwt:SystemDropShadowChrome>
							</Popup>
						</Grid>
					</Border>
					<ControlTemplate.Triggers>
						<Trigger Property="IsHighlighted" Value="true">
							<Setter TargetName="ButtonBorder" Property="Background" 
                                Value="{StaticResource LineButtonHoverBrush}" />
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<SolidColorBrush x:Key="MenuItem_ForegroundBrush"
                       Color="#333"/>
	<SolidColorBrush x:Key="MenuItem_DisabledForegroundBrush" 
                       Color="#AAA"/>
	<SolidColorBrush x:Key="MenuItem_DisabledBackgroundBrush" 
                       Color="#1555"/>

	<!-- The style for MenuItems that represent TabItems -->
	<Style x:Key="TabMenuItem" TargetType="{x:Type MenuItem}">
		<!-- 
            In order to not further pollute the sample with more
            ControlTemplates, I'll stick with simply overriding
            the HilightBrushKey for the hovered MenuItem.
            Poor man's Style. :-)
         -->
		<Style.Resources>
			<LinearGradientBrush    
                  x:Key="{x:Static SystemColors.HighlightBrushKey}"
                  StartPoint="0.5,0" EndPoint="0.5,1">
				<GradientStop Color="#FFFFD5A0" Offset="0.3"/>
				<GradientStop Color="#FFEFA335" Offset="0.51"/>
				<GradientStop Color="#FFFFC14A" Offset="0.986"/>
			</LinearGradientBrush>
		</Style.Resources>

		<!-- This will help us bind to the Header of a TabItem -->
		<Setter Property="Header" Value="{Binding Path=Header}" />
		<!-- 
            In order for MenuItems to support the IsEnabled state of a TabItem,
            we simply bind the IsEnabled property of the MenuItem to that of the
            TabItem.
            This way, a disabled TabItem will not be selectable via the Menu.
         -->
		<Setter Property="IsEnabled" Value="{Binding Path=IsEnabled}" />
		<!-- 
            By making the MenuItems checkable AND binding the IsChecked
            property to the IsSelected property of the TabItems, we'll 
            efficiently allow to pick the selected TabItem from the Menu
            with a simple two-way binding.
         -->
		<Setter Property="IsCheckable" Value="{Binding Path=IsEnabled}" />
		<Setter Property="IsChecked" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
		<Setter Property="Foreground" Value="{StaticResource MenuItem_ForegroundBrush}"/>
		<Style.Triggers>
			<Trigger Property="IsHighlighted" Value="True">
				<Setter Property="Foreground"
                       Value="{StaticResource TabItem_TextBrush_Selected}"/>
			</Trigger>
			<Trigger Property="IsEnabled" Value="False">
				<Setter Property="Foreground" 
                       Value="{StaticResource MenuItem_DisabledForegroundBrush}"/>
				<Setter Property="Background"
                                Value="{StaticResource MenuItem_DisabledBackgroundBrush}"/>
			</Trigger>
			<!-- Provide a hover-appearance for disabled MenuItems -->
			<!-- 
               This won't work due to the fact that disabled items neither receive
               IsHighlighted nor IsMouseOver ... I'll leave this for now. 
            <MultiTrigger>
               <MultiTrigger.Conditions>
                  <Condition SourceName="Border" Property="IsMouseOver" Value="True"/>
                  <Condition Property="IsEnabled" Value="False"/>
               </MultiTrigger.Conditions>
               <Setter Property="Background"
                                Value="{StaticResource MenuItem_DisabledBackgroundBrush}"/>
            </MultiTrigger>
            -->
		</Style.Triggers>
	</Style>

	<!--******** Stuff for the TabItemCloseButton (added in part IV) -> ************-->
	<SolidColorBrush x:Key="TabItemCloseButtonNormalForegroundBrush"
                       Color="{StaticResource TabItem_ForegroundColor_Base}"/>
	<SolidColorBrush x:Key="TabItemCloseButtonHoverForegroundBrush"
                       Color="White"/>
	<SolidColorBrush x:Key="TabItemCloseButtonPressedForegroundBrush"
                       Color="#EEEE"/>

	<LinearGradientBrush x:Key="TabItemCloseButtonNormalBackgroundBrush" 
                           StartPoint="0,0" EndPoint="1,0">
		<GradientBrush.GradientStops>
			<GradientStopCollection>
				<GradientStop Color="#5FFF" Offset="0.0"/>
				<GradientStop Color="#5CCC" Offset="1.0"/>
			</GradientStopCollection>
		</GradientBrush.GradientStops>
	</LinearGradientBrush>

	<LinearGradientBrush x:Key="TabItemCloseButtonNormalBorderBrush" 
                           StartPoint="0,0" EndPoint="1,1">
		<GradientBrush.GradientStops>
			<GradientStopCollection>
				<GradientStop Color="#5CCC" Offset="0.0"/>
				<GradientStop Color="#5444" Offset="1.0"/>
			</GradientStopCollection>
		</GradientBrush.GradientStops>
	</LinearGradientBrush>

	<LinearGradientBrush x:Key="TabItemCloseButtonHoverBackgroundBrush" 
                           StartPoint="0,1" EndPoint="1,0">
		<GradientBrush.GradientStops>
			<GradientStopCollection>
				<GradientStop Color="#FFDF2B1E" Offset="0.0"/>
				<GradientStop Color="#FFA41F00" Offset="1.0"/>
			</GradientStopCollection>
		</GradientBrush.GradientStops>
	</LinearGradientBrush>

	<LinearGradientBrush x:Key="TabItemCloseButtonPressedBackgroundBrush" 
                           StartPoint="0,0" EndPoint="1,1">
		<GradientBrush.GradientStops>
			<GradientStopCollection>
				<GradientStop Color="#FFA41F00" Offset="0.0"/>
				<GradientStop Color="#FFDF2B1E" Offset="1.0"/>
			</GradientStopCollection>
		</GradientBrush.GradientStops>
	</LinearGradientBrush>

	<LinearGradientBrush x:Key="TabItemCloseButtonPressedBorderBrush" 
                           StartPoint="0,0" EndPoint="1,1">
		<GradientBrush.GradientStops>
			<GradientStopCollection>
				<GradientStop Color="#5444" Offset="0.0"/>
				<GradientStop Color="#5CCC" Offset="1.0"/>
			</GradientStopCollection>
		</GradientBrush.GradientStops>
	</LinearGradientBrush>

	<Style x:Key="TabItemCloseButtonStyle" TargetType="{x:Type Button}">
		<!-- 
            The default value for SnapsToDevicePixels actually is False
            (so this setter really wouldn't be required). However, I'm 
            adding this nevertheless in order to explicitly point out that,
            in this case, it is required (see below).
         -->
		<Setter Property="SnapsToDevicePixels" Value="false"/>
		<Setter Property="Height" Value="{StaticResource CloseButtonWidthAndHeight}"/>
		<Setter Property="Width" Value="{StaticResource CloseButtonWidthAndHeight}"/>
		<Setter Property="Cursor" Value="Hand"/>
		<Setter Property="Focusable" Value="False"/>
		<Setter Property="OverridesDefaultStyle" Value="true"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Button}">
					<Border x:Name="ButtonBorder"  
                          CornerRadius="2" 
                          BorderThickness="1"
                          Background="{StaticResource TabItemCloseButtonNormalBackgroundBrush}"
                          BorderBrush="{StaticResource TabItemCloseButtonNormalBorderBrush}">
						<Grid>
							<!-- The Path below will render the button's X. -->
							<Path x:Name="ButtonPath" 
                              Margin="2"
                              Data="{StaticResource X_CloseButton}"
                              Stroke="{StaticResource TabItemCloseButtonNormalForegroundBrush}" 
                              StrokeThickness="2"
                              StrokeStartLineCap="Round"
                              StrokeEndLineCap="Round"
                              Stretch="Uniform"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"/>
							<!-- We don't really need the ContentPresenter, but what the heck ... -->
							<ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
						</Grid>
					</Border>
					<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="True">
							<Setter TargetName="ButtonBorder" Property="Background" 
                                Value="{StaticResource TabItemCloseButtonHoverBackgroundBrush}" />
							<Setter TargetName="ButtonPath" Property="Stroke" 
                                Value="{StaticResource TabItemCloseButtonHoverForegroundBrush}"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Visibility" Value="Collapsed"/>
						</Trigger>
						<Trigger Property="IsPressed" Value="true">
							<Setter TargetName="ButtonBorder" 
                                Property="Background" 
                                Value="{StaticResource TabItemCloseButtonPressedBackgroundBrush}" />
							<Setter TargetName="ButtonBorder" 
                                Property="BorderBrush" 
                                Value="{StaticResource TabItemCloseButtonPressedBorderBrush}" />
							<Setter TargetName="ButtonPath" Property="Stroke" 
                                Value="{StaticResource TabItemCloseButtonPressedForegroundBrush}"/>
							<!-- 
                           Simulate a pressed-effect by moving the contents down and to the right.
                           Since the button is pretty small, the trick here is to only shift things
                           just a tiny little bit, hence the fractional values below.
                           Note that, in order for this to work as expected, SnapsToDevicePixels
                           must be set to "false" (see the setter at the top of this style).
                        -->
							<Setter TargetName="ButtonPath" Property="Margin" Value="2.5,2.5,1.5,1.5" />
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<!--******** <- Stuff for the TabItemCloseButton (added in part IV) ************-->


	<!-- The TabControl's Style. -->
	<Style TargetType="{x:Type TabControl}" x:Name="TabControl">
		<Setter Property="SnapsToDevicePixels" Value="true"/>
		<Setter Property="BorderThickness" Value="1,0,1,1"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="TabControl">
					<Grid KeyboardNavigation.TabNavigation="Local">
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="*"/>
						</Grid.RowDefinitions>

						<!--
                        In order to still draw the LinearGradient that makes up for the bottom
                        line of the TabPanel, we need to wrap the ScrollViewer in a Border 
                        control that will be responsible for drawing the background.
                     -->
						<Border Name="TabPanelBorder"
                             Height="35"
                             Background="{StaticResource TabPanel_BackgroundBrush}">
							<Grid>
								<Grid.ColumnDefinitions>
									<!-- The TabItems (resp. the TabPanel) will appear here -->
									<ColumnDefinition Width="*"/>
									<!-- The ScrollViewer controls will appear here -->
									<ColumnDefinition Width="Auto"/>
								</Grid.ColumnDefinitions>
								<Grid.RowDefinitions>
									<RowDefinition Height="*"/>
									<RowDefinition Height="Auto"/>
								</Grid.RowDefinitions>
								<ScrollViewer Grid.Row="0" Grid.RowSpan="2"
                                         VerticalScrollBarVisibility="Disabled"
                                         CanContentScroll="True" 
                                         HorizontalScrollBarVisibility="Hidden"
                                         IsDeferredScrollingEnabled="False"
                                         SnapsToDevicePixels="True"
                                         Name="svTP"
                                         HorizontalAlignment="Stretch" 
                                         VerticalAlignment="Stretch"
                                         >
									<!--
                                    This is the area in which TabItems (the strips) will be drawn.

                                    Unselected TabItems will apply a right margin of -4px in 
                                    order to overlay the item to their right. In order to allow 
                                    the rightmost TabItem to be fully displayed (rather than
                                    being overlayed with the Button-Panel), we need to apply this
                                    as the Margin here.
                                 -->
									<local:ScrollableTabPanel IsItemsHost="True"
                                                        x:Name="PART_ScrollContentPresenter"
                                                        Margin="{StaticResource TabPanel_Padding}"                                  
                                                        RightOverflowMargin="4"  
                                                        AnimationTimeSpan="0:0:0.25" 
                                                        LineScrollPixelCount="100" 
                                                        KeyboardNavigation.TabIndex="1"/>
								</ScrollViewer>
								<StackPanel Grid.Row="1" 
                                       Grid.Column="3"
                                       Orientation="Horizontal"
                                       Margin="{StaticResource TabPanelScrollControlsPanel_Margin}">
									<!-- 
                                 The two RepeatButtons below will actually provide the scroll-
                                 functionality for the TabItems. Since the ScrollableTabPanel
                                 does not implements PageLeft/PageRight, LineLeft/LineRight
                                 are used.
                              -->
									<RepeatButton x:Name="cmdScrollLeft"
                                            Focusable="False"
                                            Style="{StaticResource LineButtonStyle}"
                                            CommandTarget="{Binding ElementName=svTP}"
                                            Command="ScrollBar.LineLeftCommand"
                                            Content="{StaticResource ArrowLeftPath}"
                                            IsEnabled="{Binding ElementName=PART_ScrollContentPresenter, Path=CanScrollLeft}"
                                            />
									<RepeatButton x:Name="cmdScrollRight"
                                            Focusable="False"
                                            Style="{StaticResource LineButtonStyle}"
                                            CommandTarget="{Binding ElementName=svTP}"
                                            Command="ScrollBar.LineRightCommand"
                                            Content="{StaticResource ArrowRightPath}"
                                            IsEnabled="{Binding ElementName=PART_ScrollContentPresenter, Path=CanScrollRight}"
                                            />
									<!-- 
                                 This will present another "button" which will open up the Menu
                                 containing all TabItems, with the selected one being checked.
                                 Clicking an item here will select the respective TabItem.
                              -->
									<Menu Background="Transparent">
										<MenuItem Style="{StaticResource TabMenuButtonStyle}"
                                           ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, 
                                                AncestorType={x:Type TabControl}}, Path=Items}"
                                           ItemContainerStyle="{StaticResource TabMenuItem}">
										</MenuItem>
									</Menu>
								</StackPanel>
							</Grid>
						</Border>

						<!-- 
                        This is the outer border of the TabControl itself, actually meaning
                        the Panel that will host a TabItem's content.
                        The top-border here will not be drawn as, otherwise, the TabPanel
                        would always show a thin line for the selected Tab (which we want 
                        to avoid).
                     -->
						<Border BorderThickness="1,0,1,1" 
                             Grid.Row="1" 
                             BorderBrush="{StaticResource TabItem_BorderBrush_Selected}" 
                             Background="{StaticResource TabControl_BackgroundBrush_Base}">
							<!-- This is the first/outer Border drawn on the TabPage -->
							<Border BorderThickness="1" 
                                BorderBrush="{StaticResource TabPage_InnerBorderBrushDark}" 
                                CornerRadius="3" 
                                Margin="8">
								<!-- 
                              This is the second/inner Border drawn on the TabPage. 
                              This Border is drawn with a horizontal Gradient that is transparent
                              on the left which produces the fading effect.
                           -->
								<Border BorderThickness="1" 
                                   BorderBrush="{StaticResource TabPage_InnerBorderBrushBright}" 
                                   CornerRadius="2" 
                                   Margin="0" 
                                   Padding="2,2,3,3"
                                   >
									<!-- 
                                 This is where the Content of the selected TabPage 
                                 will be rendered. 
                              -->
									<ContentPresenter x:Name="PART_SelectedContentHost"
                                                ContentSource="SelectedContent" 
                                                Margin="0"/>
								</Border>
							</Border>
						</Border>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<!-- This is required in order to appropriately draw the focus-visual -->
	<Style x:Key="TabItemFocusVisual">
		<Setter Property="Control.Template">
			<Setter.Value>
				<ControlTemplate>
					<Rectangle Stroke="#555" StrokeDashArray="1 2" 
                             StrokeThickness="1" 
                             Margin="0,8,3,6" 
                             SnapsToDevicePixels="true"/>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<!-- The Style for TabItems (strips). -->
	<Style TargetType="{x:Type TabItem}">
		<Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type TabItem}">
					<!-- The Grid helps defining the general height of TabItems. -->
					<Grid Height="35" VerticalAlignment="Bottom">
						<!-- 
                        The important aspect here is that the bottom of the Border is 0px thick,
                        helping the TabItem/strip to blend into the TabPage.
                     -->
						<Border Name="Border"
                             Background="{StaticResource TabItem_BackgroundBrush_Unselected}"
                             BorderBrush="{StaticResource TabItem_BorderBrush_Selected}" 
                             Margin="{StaticResource TabItemMargin_Base}"
                             BorderThickness="2,1,1,0" 
                             CornerRadius="3,3,0,0" 
                             >
							<!--******** 
                           This grid, along with its content (except for the TI-ContentPresenter)
                           have been added in part IV.
                        ************-->
							<Grid>
								<Grid.ColumnDefinitions>
									<!-- Text / TabItem's Caption -->
									<ColumnDefinition/>
									<!-- Close button -->
									<ColumnDefinition/>
								</Grid.ColumnDefinitions>
								<!-- This is where the Content of the TabItem will be rendered. -->
								<ContentPresenter x:Name="ContentSite"
                                             VerticalAlignment="Center"
                                             HorizontalAlignment="Center"
                                             ContentSource="Header"
                                             Margin="7,2,12,2"
                                             RecognizesAccessKey="True"/>
								<!-- 
                              This represents the Close-button.
                           
                              The Command-binding that we create here refers to the Window's 
                              DataContext (which, for the sample, is the window's code-behind);
                              In order for the Command to be able to determine which TabItem the
                              button belongs to, a relative binding will do the trick (i.e., 
                              (bubble up to the parent TabItem).
                           -->

							</Grid>
						</Border>
					</Grid>
					<ControlTemplate.Triggers>
						<!-- The appearance of a TabItem when it's inactive/unselected -->
						<MultiTrigger>
							<MultiTrigger.Conditions>
								<Condition Property="Border.IsMouseOver" Value="False"/>
								<Condition Property="IsSelected" Value="False"/>
							</MultiTrigger.Conditions>
							<!-- 
                           The Triggers required to animate the TabItem when it enters/leaves 
                           the "Unselected" state (added in part two) 
                        -->
							<MultiTrigger.EnterActions>
								<BeginStoryboard x:Name="sbUnselected"
                                            Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
							</MultiTrigger.EnterActions>
							<MultiTrigger.ExitActions>
								<StopStoryboard BeginStoryboardName="sbUnselected"/>
							</MultiTrigger.ExitActions>
							<Setter Property="Panel.ZIndex" Value="90" />
							<Setter TargetName="Border" Property="Background" 
                                Value="{StaticResource TabItem_BackgroundBrush_Unselected}" />
							<Setter TargetName="Border" Property="BorderBrush" 
                                Value="{StaticResource TabItem_Border_Unselected}" />
							<Setter Property="Foreground" 
                                Value="{StaticResource TabItem_TextBrush_Unselected}" />
							<!-- Except for the selected TabItem, tabs are to appear smaller in height. -->
							<Setter TargetName="Border" Property="Margin" 
                                Value="{StaticResource TabItemMargin_Base}"/>
						</MultiTrigger>

						<!-- 
                        The appearance of a TabItem when it's disabled 
                        (in addition to Selected=False)
                     -->
						<Trigger Property="IsEnabled" Value="False">
							<Setter Property="Panel.ZIndex" Value="80" />
							<Setter TargetName="Border" Property="BorderBrush"
                                Value="{StaticResource TabItem_DisabledBorderBrush}" />
							<Setter TargetName="Border" Property="Background" 
                                Value="{StaticResource TabItem_BackgroundBrush_Disabled}" />
							<Setter Property="Foreground" 
                                Value="{StaticResource TabItem_TextBrush_Disabled}" />
							<Setter TargetName="Border" Property="Margin" 
                                Value="{StaticResource TabItemMargin_Base}"/>
						</Trigger>

						<!-- The appearance of a TabItem when the mouse hovers over it -->
						<MultiTrigger>
							<MultiTrigger.Conditions>
								<Condition Property="Border.IsMouseOver" Value="True"/>
								<Condition Property="IsSelected" Value="False"/>
							</MultiTrigger.Conditions>
							<!-- 
                           The Triggers required to animate the TabItem when it enters/leaves the "Hover"
                           state (added in part two) 
                        -->
							<MultiTrigger.EnterActions>
								<StopStoryboard BeginStoryboardName="sbUnselected_Hover_Exit"/>
								<BeginStoryboard x:Name="sbHover"
                                            Storyboard="{StaticResource TabItemStoryBoard_Hover}"/>
							</MultiTrigger.EnterActions>
							<MultiTrigger.ExitActions>
								<BeginStoryboard x:Name="sbUnselected_Hover_Exit" 
                                            Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
							</MultiTrigger.ExitActions>
							<Setter Property="Panel.ZIndex" Value="99" />
							<Setter Property="Foreground" Value="{StaticResource TabItem_TextBrush_Hover}" />
							<Setter Property="BorderBrush" 
                                TargetName="Border" 
                                Value="{StaticResource TabItem_HoverBorderBrush}" />
							<Setter TargetName="Border" Property="BorderThickness" Value="2,1,1,1" />
							<Setter Property="Background" TargetName="Border"
                                Value="{StaticResource TabItem_HoverBackgroundBrush}"/>
							<!-- 
                           To further increase the hover-effect, extend the TabItem's height a little
                           more compared to unselected TabItems.
                        -->
							<Setter TargetName="Border" Property="Margin" 
                                Value="{StaticResource TabItemMargin_Hover_Final}"/>
						</MultiTrigger>

						<!-- The appearance of a TabItem when it's active/selected -->
						<Trigger Property="IsSelected" Value="True">
							<!-- 
                           The Triggers required to animate the TabItem when it 
                           enters/leaves the "Selected" state (added in part two) 
                        -->
							<Trigger.EnterActions>
								<StopStoryboard BeginStoryboardName="sbUnselected_Selected_Exit"/>
								<BeginStoryboard 
                              x:Name="sbSelected"
                              Storyboard="{StaticResource TabItemStoryBoard_Selected}"/>
							</Trigger.EnterActions>
							<Trigger.ExitActions>
								<BeginStoryboard 
                              x:Name="sbUnselected_Selected_Exit" 
                              Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
							</Trigger.ExitActions>
							<!-- We want the selected TabItem to always be on top. -->
							<Setter Property="Panel.ZIndex" Value="100" />
							<Setter TargetName="Border" Property="BorderBrush" 
                                Value="{StaticResource TabItem_BorderBrush_Selected}" />
							<Setter TargetName="Border" Property="Background" 
                                Value="{StaticResource TabItem_BackgroundBrush_Selected}" />
							<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
							<Setter Property="Foreground" 
                                Value="{StaticResource TabItem_TextBrush_Selected}"/>
							<Setter TargetName="Border" Property="Margin" 
                                Value="{StaticResource TabItemMargin_Selected}"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</ResourceDictionary>